<template>
  <el-container style="height: 100vh;">
    <el-header style="background-color: #cce5ff; text-align: center; padding: 20px;">
      <h2>{{ headerTitle }}</h2>
    </el-header>

    <el-container>
      <el-aside width="200px" style="background-color: #f0f8ff; padding-top: 20px;">
        <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" background-color="#f0f8ff">
          <el-menu-item index="1" @click="activeMenu = '1'">
            <el-icon><Document></Document></el-icon>
            <span>个人信息</span>
          </el-menu-item>
          <el-menu-item index="2" @click="activeMenu = '2'">
            <el-icon><Location></Location></el-icon>
            <span>医疗服务报销申请</span>
          </el-menu-item>
          <el-menu-item index="3" @click="activeMenu = '3'">
            <el-icon><Document></Document></el-icon>
            <span>医疗服务提交历史</span>
          </el-menu-item>
          <el-menu-item index="4" @click="activeMenu = '4'">
            <el-icon><Document></Document></el-icon>
            <span>报销记录查询</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      
      <el-main style="background-color: #e3f2fd; padding: 20px;">
        <component :is="currentComponent"></component>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { Document, Location } from "@element-plus/icons-vue";
import ReimbursementRecords from '../components/ReimbursementRecords.vue';
import UserProfile from '../components/UserProfile.vue';
import MedicalInsuranceApplication from '../components/MedicalInsuranceApplication.vue';
import MedicalService from '../components/MedicalService.vue';
export default {
  components: { Location, Document },
  data() {
    return {
      activeMenu: '1', // 默认显示
      headerTitle: '医疗保险管理系统'
    };
  },
  computed: {
    currentComponent() {
      switch (this.activeMenu) {
        case '1':
          return UserProfile;
        case '2':
          return MedicalInsuranceApplication;
        case '3':
          return MedicalService;
        case '4':
          return ReimbursementRecords;
        default:
          return UserProfile; // 默认返回主页组件
      }
    }
  },
  methods: {
  }
};
</script>

<style scoped>
h2 {
  margin: 0;
  color: #333;
}

.el-menu-item {
  font-size: 16px;
  padding: 10px 20px;
}

.el-menu-item .el-icon {
  margin-right: 10px;
}

.el-header {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.el-main {
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s;
}
</style>
